<template>
  <div>
    <div class="settle-container">
      <header>
        <van-nav-bar title="提交订单" :fixed="true" left-arrow @click-left="onClickLeft"></van-nav-bar>
      </header>
      <section>
        <div class="owner" @click="toNewaddress">
          <span class="shouhuo">收货人</span>
          <div class="right">
            <!-- <van-icon name="location-o" /> -->
            <!-- <p v-if="showAdr">请填写收货地址</p> -->
            <p class="write" v-if="showAdr1">{{receiver}}&nbsp;&nbsp;{{adress1}}</p>
            <span v-if="showAdr1" class="adre">{{adressDet}}</span>
          </div>

          <!--  -->
          <van-icon class="leftArrow" name="arrow" />
          <img
            class="border-img"
            src="https://img02.hua.com/m/Shopping/20180919/img/m_orderinfo_bd.png"
            alt
          />
        </div>
        <div class="info">
          <div @click="toOderperinfo">
            <!-- <span class="perInfo">订购人信息</span> -->
            <!-- <p class="write">{{perInfo}}</p> -->
            <!-- <van-icon name="arrow" /> -->
          </div>
        </div>

        <div class="odergodds" v-if="isOderArr">
          <div class="item" v-for="item in oderArr" :key="item._id">
            <van-card
              :num="item.quantity"
              :price="item.product.price"
              :desc="item.product.descriptions"
              :title="item.productname"
              :thumb="item.product.coverImg"
            ></van-card>
            <div class="itemprice">
              <p>商品总金额</p>
              <span>￥ {{item.product.price*item.quantity}}</span>
            </div>
          </div>
        </div>
        <div class="odergodds" v-if="isQueryId">
          <div class="item">
            <van-card :num="num" :price="price" :desc="desc" :title="name" :thumb="img"></van-card>
            <div class="itemprice">
              <p>商品总金额</p>
              <span>￥{{ price?count:'0' }}</span>
            </div>
          </div>
        </div>
      </section>
      <footer v-if="isOderArr">
        <van-submit-bar
          :price="this.$store.getters.OderList*100"
          button-text="提交订单"
          @submit="toPayfor"
        />
      </footer>
      <footer v-if="isQueryId">
        <van-submit-bar :price="count*100" button-text="提交订单" @submit="toPayfor" />
      </footer>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog } from "vant";
Vue.use(Dialog);
import { Collapse, CollapseItem } from "vant";

Vue.use(Collapse).use(CollapseItem);
import * as api from '../api/getProlist'
export default {
  name: "Settlement",
  data() {
    return {
      name: "",
      desc: "",
      price: "",
      id: "",
      img: "",
      num: 1,
      perInfo: "请选择",
      receiver: "",
      adress1: "请填写收货地址",
      adressDet: "",
      showAdr: true,
      showAdr1: false,
      regions: "",
      oderArr: [],
      isOderArr: false,
      isQueryId: false
    };
  },
  computed: {
    count() {
      return this.num * this.price;
    }
  },
  methods: {
    // onClickLeft() {
    //   this.$router.go("/detail");
    // },
    toPayfor() {
      if (this.receiver) {
        if (localStorage.getItem("token")) {
          this.$toast.loading({
            message: "加载中...",
            forbidClick: true,
            duration: 500
          });
          setTimeout(() => {
            // localStorage.setItem(
            //   "ownerinfo",
            //   JSON.stringify([
            //     {
            //       receiver: this.receiver,
            //       regions: this.regions,
            //       adressDet: this.adressDet
            //     }
            //   ])
            // );
			console.log(this.$route.query.id)
			this.$router.push(`/payfor?price=${this.num*this.price}&id=${this.id}`);
			console.log(this.$store.getters.OderList*100)
            
          }, 600);
        } else {
          this.$toast.loading({
            message: "加载中...",
            forbidClick: true,
            duration: 500
          });
          // setTimeout(function() {
          //   this.$router.push('/payfor');
          // }, 600);
        }
      } else {
        Dialog.alert({
          message: "请填写收货地址"
        }).then(() => {});
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    toNewaddress() {
      this.$router.push("/addressplace");
    },
    toOderperinfo() {
      this.$router.push("/oderPerInfo");
    },
    toDate() {
      this.$router.push("/sendDate");
    }
  },
  mounted() {
	console.log(this.$route.query.id)
    if (this.$route.query.id) {
      this.isQueryId = true;
	  console.log(2)
      api.getProDetail(this.$route.query.id).then(data => {
		console.log(2)
        console.log(data.data);
        this.name = data.data.name;
        this.price = data.data.price;
        this.desc = data.data.descriptions;
        this.id = data.data._id;
        this.img = data.data.coverImg;
      });
    } else if (this.$store.state.oderInfo.length >= 1) {
      this.isOderArr = true;
      this.$store.state.oderInfo.forEach(item => {
        this.oderArr.push(item);
      });
    }
	console.log(localStorage.getItem('chosenAddressId'))
	if(localStorage.getItem('chosenAddressId')){
		api.getoneAddress(localStorage.getItem('chosenAddressId')).then((data)=>{
			this.showAdr=false
			this.showAdr1=true
			console.log(data)
			this.receiver=data.data.receiver
			this.adress1=data.data.mobile
			this.adressDet=data.data.address
		})
	}
  }
};
</script>

<style scoped=''>
p,
span,
li,
ul,
h1,
img,
a {
  margin: 0;
  padding: 0;
  color: #333;
}
body,
html {
  height: 100%;
  display: flex;
}
.van-nav-bar .van-icon {
  color: #333;
  font-size: 22px;
}
footer {
  height: 50px;
  background-color: #ccc;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
section {
  margin: 50px 0;
  flex: 1;
  background-color: #f5f5f5;
}
.owner {
  width: 100%;
  height: 66px;
  background: #fff;
  position: relative;
}
.owner .shouhuo {
  display: block;
  width: 60px;
  height: 46px;
  border-right: 1px solid #999;
  margin-top: 10px;
  float: left;
  line-height: 56px;
  text-align: center;
  font-size: 14px;
}
.right {
  width: 260px;
  float: left;
  line-height: 66px;
  margin-left: 7px;
}
.right p {
  font-size: 16px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-weight: bold;
}
.leftArrow {
  font-size: 22px;
  position: relative;
  top: 20px;
}

.van-icon-location-o {
  font-size: 22px;
  font-weight: 700;
}
.border-img {
  height: 4px;
  width: 100%;
  position: absolute;
  top: 66px;
  left: 0;
}
.info .item {
  padding: 0 15px;
  background-color: #fff;
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.info .item span {
  display: block;
  width: 100px;
}
.write {
  color: #000;
  position: absolute;
  top: 10px;
  left: 95px;
}
.adre {
  color: #999;
  position: absolute;
  top: 10px;
  left: 95px;
}
.gift {
  color: #999;
  margin-left: -20px;
}
.rigit {
  margin-top: 8px;
  padding: 0 15px;
  background-color: #fff;
  display: flex;
  height: 50px;
  align-items: center;
  font-size: 14px;
}
.rigit span {
  display: block;
  margin-right: 165px;
}
.odergodds {
  margin-top: 8px;
}

.van-image {
  width: 75% !important;
}
.van-card__title {
  height: 25px;
  line-height: 25px;

  margin-bottom: 35px;
}
.itemprice {
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 0 15px;
  background-color: #fff;
  margin-top: 8px;
}
.itemprice p {
  margin-right: 175px;
}
.van-button--danger {
  background-color: #ff734c;
  border: 0;
}
.perInfo {
  width: 150px;
  display: inline-block;
}
.shouhuo {
  width: 60px;
  display: inline-block;
}
.van-nav-bar{background: #d4616e;}
.van-nav-bar__title{color: #fff;font-size: 14px}
.van-icon-arrow-left:before{color: #fff;font-size: 14px;line-height: 46px;}
/* .van-button--danger[data-v-30dcfe63]{background: #d4616e;} */
.van-button--danger span{color: #fff;}

.van-button--danger{background: #d4616e;}
</style>